<template>
  <div id="HomePage">
    <!--    搜索栏-->
    <serch-line />

    <div class="pic-box">
      <div
        class="pic-item"
        v-for="(img, index) in bannerImgList"
        :key="index"
        @click="onClickImage(img.id)"
      >
        <img :src="img.url" alt="Image" />
        <div class="pic-text">{{ img.text }}</div>
      </div>
    </div>
    <!-- 绘制一条灰色虚线 -->
    <div class="line"></div>
    
    <div class="sub-title-box">
      <div class="text">
        <img src="/public/Categories .png" alt="Image" />
      </div>
      <div class="line"></div>
    </div>

    <div class="product-title-box">
      <div class="title">
        <div class="white-box">
          <el-button
            v-for="(item, index) in subTitleList"
            :key="index"
            @click="selectText(index)"
            type="text"
            class="hover-button">
            {{ item.text }}
          </el-button>
        </div>
      </div>
    </div>

    <!-- 使用 v-for 渲染多个产品列表 -->
    <div
      class="product-list-list"
      v-for="(item, index) in subTitleList"
      :key="index"
      :ref="setProductRef(index)"
    >
    <div class="product-list">
      <div class="sub-title-box">
        <div class="text">
          {{ item.text }}
        </div>
        <div class="line"></div>
      </div>

      <div class="product-content-box">
        <div class="product-container" >
          <div class="product-box" v-for="(item, index) in item.pic" :key="index">
            <div class="pic-item">
              <img :src="item.url" alt="Image" />
            </div>
            <div class="text-item">
              POONG KWANG BRAND GASSINGEING MACHINE FOR
            </div>
          </div>
        </div>
        <!-- 产品内容 -->
      </div>
    </div>
  </div>

    <div class="zhangezide">

    </div>
  </div>
</template>

<script setup>
import { ref, nextTick } from 'vue';
import { useRouter } from 'vue-router';
import serchLine from './components/search-line.vue';
import ReportApiUrlConfig from '@/api/select.ts'
import axios from 'axios'

const bannerImgList = ref([
]);

const subTitleList = ref([
  { text: 'FINISHING',
    pic:[{ url: 'public/1.png' },
    { url: 'public/1.png' },
    { url: 'public/1.png' },
    ]},
  { text: 'WEAVING' ,
    pic:[{ url: 'public/1.png' },
      { url: 'public/1.png' },
      { url: 'public/1.png' },
    ]},
  { text: 'SPINNING' ,
    pic:[{ url: 'public/1.png' },
      { url: 'public/1.png' },
      { url: 'public/1.png' },
    ]},
  { text: 'DYEING' ,
    pic:[{ url: 'public/1.png' },
      { url: 'public/1.png' },
      { url: 'public/1.png' },
    ]},
  { text: 'OTHERS' ,
    pic:[{ url: 'public/1.png' },
      { url: 'public/1.png' },
      { url: 'public/1.png' },
    ]},
  { text: 'TEXTILE' ,
    pic:[{ url: 'public/1.png' },
      { url: 'public/1.png' },
      { url: 'public/1.png' },
    ]},
  { text: 'MACHINERY' ,
    pic:[{ url: 'public/1.png' },
      { url: 'public/1.png' },
      { url: 'public/1.png' },
    ]}
]);
const onClickImage = (id) => {
  console.log(`Image at index ${id} clicked`);
};

const list=ref();
const querySupplyUseNum = async () => {
  const {data} = await axios.get(ReportApiUrlConfig.topEightist);
  if(!data) return;
  bannerImgList.value=data.data;
  console.log("------------------")
  console.log(data)
};
querySupplyUseNum();
// 选中的索引
const selectedIndex = ref(null);

// 用于存储每个产品列表的 DOM 引用
const productRefs = ref([]);

// 设置动态 ref 方法
const setProductRef = (index) => (el) => {
  console.log(el)
  if (el) {
    productRefs.value[index] = el; // 将 DOM 元素存储�� productRefs 中
  }
};

// 点击标题时跳转到对应的部分
const selectText = (index) => {
  selectedIndex.value = index;

  nextTick(() => {
    console.log(selectedIndex.value);
    const targetRef = productRefs.value[index];
    console.log(targetRef);
    if (targetRef) {
      targetRef.scrollIntoView({ behavior: 'smooth', block: 'start' });
    } else {
      console.error(`没有找到对应的 ref，索引：${index}`);
    }
  });
};

// 如果存在 hash，则滚动到对应的元素
const router = useRouter();
router.beforeEach((to, from) => {
  if (to.hash) {
    const element = document.querySelector(to.hash);
    if (element) {
      element.scrollIntoView({ behavior: 'smooth' });
    }
  }
});
</script>


<style scoped>
html {
  scroll-behavior: smooth;
}
/* 整体盒子 */
#HomePage {
  width: 100%;
  display: flex;

  flex-direction: column;
  align-content: center;
  justify-content: center;
  align-items: center;
  gap: 20px;

}

.pic-box {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 每行4列 */
  grid-template-rows: repeat(2, 1fr); /* 两行 */
  width: 55%;
  height: 500px;
  gap: 1px; /* 图片之间的间距 */
  box-sizing: border-box;

  .pic-item {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    border: 2px solid transparent; /* 默认无边框 */
    transition: border-color 0.3s; /* 点击时边框颜色过渡 */
  }

  .pic-item:hover {
    border-color: lightgray; /* 鼠标悬浮时显示灰边框 */
  }

  .pic-item img {
    width: 100%; /* 强制图片拉伸填满子容器宽度 */
    height: 100%; /* 强制图片拉伸填满子容器高度 */
    object-fit: fill; /* 强制图片填充，不保留宽高比 */
  }

  .pic-text {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 15%;
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 半透明灰色背景 */
    color: white;
    font-size: 12px;
    text-align: center;
    padding: 5px;
    box-sizing: border-box;
    line-height: 1.3; /* 行高设置 */
    overflow: hidden; /* 隐藏超出内容 */
    display: -webkit-box; /* 配合 line-clamp 使用 */
    -webkit-box-orient: vertical; /* 设置为垂直方向 */
    -webkit-line-clamp: 2; /* 限制显示两行 */
    text-overflow: ellipsis; /* 超出部分显示省略号 */
    white-space: normal; /* 允许文本换行 */
    word-break: break-word; /* 避免长单词超出容器 */
  }

}


.product-list-list{
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
}
.product-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;

  .product-content-box {
    width: 100%;
    height: 250px;
    display: flex;
    justify-content: center;  /* 水平居中 */
    align-items: center;      /* 垂直居中 */
    .product-container{
      width: 90%;
      height: 90%;
      display: flex;
      flex-wrap: wrap;  /* 使子项换行 */
      justify-content: space-between; /* 子项之间的间隔 */
      gap: 20px;  /* 设置每个 box 之间的间隔 */

      .product-box{
        width: calc(33.33% - 20px);  /* 每个 box 占三分之一宽度，减去间隔 */
        height: 100%;
        background-color: white;
        border-top: 2px solid #30A9FC; /* 上边框蓝色 */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        display: flex;
        justify-content: center;  /* 居中对齐图片 */
        align-items: center;
        flex-direction: column;
        gap: 10px;
        /* 居中对齐图片 */
        .pic-item {
          width: 70%;
          height: 70%;
        }

        .pic-item img {
          width: 100%;  /* 图片宽度占满父元素 */
          height: 100%; /* 图片高度占满父元素 */
          object-fit: cover;  /* 保持图片比例，裁切溢出部分 */
        }
        .text-item{
          padding: 3px;
          width: 80%;
          font-size: 10px;
          background: #30A9FC;
          border-radius: 6px;
          opacity: 0.7;
        }
      }
    }
  }

  .sub-title-box {
    display: flex;
    width: 100%;
    height: 25px;
    flex-direction: column;
    justify-content: space-between;

    .text {
      font-size: 15px; /* 设置字体大小为 21px */
      color: #30A9FC; /* 设置字体颜色为蓝色 */
      font-weight: bold; /* 设置字体加粗 */
    }

    .text img {
      display: block; /* 避免图片底部的间隙 */
      max-width: 100%; /* 图片自适应父组件宽度 */
      height: auto; /* 保持图片比例 */
    }

    .line {
      width: 100%; /* 填充父组件宽度 */
      border-top: 1px dashed #d3d3d3; /* 设置淡灰色虚线 */
      margin-top: 10px; /* 根据需要调整与图片的间距 */
    }
  }
}
.sub-title-box {
  display: flex;
  width: 55%;
  height: 25px;
  flex-direction: column;
  justify-content: space-between;

  .text {
    font-size: 15px; /* 设置字体大小为 21px */
    color: #30A9FC; /* 设置字体颜色为蓝色 */
    font-weight: bold; /* 设置字体加粗 */
  }

  .text img {
    display: block; /* 避免图片底部的间隙 */
    max-width: 100%; /* 图片自适应父��件宽度 */
    height: auto; /* 保持图片比例 */
  }

  .line {
    width: 100%; /* 填充父组件宽度 */
    border-top: 1px dashed #d3d3d3; /* 设置淡灰色虚线 */
    margin-top: 10px; /* 根据需要调整与图片的间距 */
  }
}
.product-title-box {
  margin-left: 20px;
  display: flex;
  width: 55%;
  height: 60px;
  justify-content: center;

  .white-box {
    width: 97%; /* 占父组件的95%宽度 */
    height: 90%; /* 占父组件的90%高度 */
    border: 1px solid #ddd; /* 添加边框 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加淡淡的阴影 */
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;

    .el-button {
      margin: 0 10px;
      font-size: 16px;
      padding: 10px 20px;
      color: #30A9FC;
      position: relative; /* 为了让 ::after 伪元素生效 */
    }

    .el-button.selected {
      color: #30A9FC; /* 选中按钮时，文本颜色为蓝色 */
    }

    .el-button:hover::after {
      content: '';
      position: absolute;
      bottom: 0; /* 将横线放置在按钮的底部 */
      left: 20px;
      width: 15px;
      height: 4px;
      background-color: #30A9FC; /* 横线颜色 */
    }
  }

}



.zhangezide {
  height: 50px;
}

</style>

